<template>
    <div class="container">
        <div
            class="news-header"
            :style="{
                backgroundImage: `url(${require('@/assets/1.png')})`,
            }"
        ></div>
        <div class="text">资料仓库</div>
        <!-- 搜索 -->
        <div class="search">
            <el-popover placement="bottom" :visible="visible" title="搜索结果" width="40%">
                <template #reference>
                    <el-input
                        v-model="searchText"
                        type="search"
                        class="w-50 m-2"
                        placeholder="请输入关键字"
                        :prefix-icon="Search"
                        size="large"
                        @input="visible = true"
                        @blur="visible = false"
                    />
                </template>
                <div v-if="searchNewsList.length">
                    <!-- 搜索结果 -->
                    <div
                        class="search-item"
                        @click="handleChangePage(data._id)"
                        v-for="data in searchNewsList"
                        :key="data._id"
                    >
                        {{ data.title }}
                    </div>
                </div>
                <div v-else><el-empty :image-size="50" description="暂无内容" /></div>
            </el-popover>
        </div>
        <!-- 内容 -->
        <div class="topnews">
            <el-row :gutter="20">
                <el-col :span="6" v-for="item in topNewsList" :key="item._id">
                    <el-card @click="handleChangePage(item._id)" shadow="hover" :body-style="{ padding: '5px' }">
                        <div class="image"></div>
                        <div style="padding: 14px">
                            <span>{{ item.title }}</span>
                            <div class="bottom">
                                <time class="time">{{ whichTime(item.editTime) }}</time>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <!-- 标签页 -->
        <el-tabs style="margin: 22px" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane :label="item.label" v-for="item in tabList" :key="item.name" :name="item.name">
                <!-- 24栅格 -->
                <el-row :gutter="20">
                    <el-col :span="18">
                        <div v-for="data in tabNews[item.name]" :key="data._id">
                            <!-- 具体内容 -->
                            <el-card
                                @click="handleChangePage(data._id)"
                                shadow="hover"
                                :body-style="{ padding: '5px' }"
                            >
                                <div style="padding: 14px">
                                    <span class="tab-title">{{ data.title }}</span>
                                    <div class="bottom">
                                        <time class="tab-time">{{ whichTime(data.editTime) }}</time>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <!-- 时间线 -->
                        <el-timeline>
                            <el-timeline-item
                                v-for="(data, index) in tabNews[item.name]"
                                :key="index"
                                :timestamp="whichTime(data.editTime)"
                            >
                                {{ data.title }}
                            </el-timeline-item>
                        </el-timeline>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
        <!-- 返回顶部 -->
        <el-backtop :right="60" :visibility-height="50" :bottom="60" />
    </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
import moment from 'moment';
import _ from 'lodash';
import { useRouter } from 'vue-router';
const router = useRouter();
moment.locale('zh-cn');
//内容数据
const newList = ref([]);
//标签的model
const activeName = ref(1);
//搜索框
const searchText = ref('');
//搜索结果
const visible = ref(false);
//初始化时候获取一次数据
onMounted(async () => {
    const res = await axios.get('/webapi/news/list');
    newList.value = res.data.data;
});
//通过计算属性对数据进行分类;
const searchNewsList = computed(() =>
    // 从后端给的数组里检索到携带搜索框value的内容
    //有值运算 没有值返回空数组
    newList.value ? newList.value.filter(item => item.title.includes(searchText.value)) : []
);
//通过计算属性将数组的前四个截出来
//从0开始 拿四个
const topNewsList = computed(() => newList.value.slice(0, 4));
//格式化时间
const whichTime = time => {
    return moment(time).format('llll');
};
//标签页数组
const tabList = [
    {
        label: '最新动态',
        name: 1,
    },
    {
        label: '典型案例',
        name: 2,
    },
    {
        label: '通知公告',
        name: 3,
    },
];
//基于tabnews进行一个分组
const tabNews = computed(() => _.groupBy(newList.value, item => item.category));
//跳转到内容详情
const handleChangePage = id => {
    router.push(`/new/${id}`);
};
</script>

<style lang="scss" scoped>
.tab-title {
    font-size: 15px;
    color: black;
}
.tab-time {
    font-size: 10px;
    color: gray;
}
.topnews {
    margin: 22px;
    .time {
        font-size: 13px;
        color: gray;
    }
    .image {
        width: 100%;
        height: 145px;
        background-size: cover;
    }
}
.container {
    position: relative;
}
.news-header {
    width: 100%;
    height: 200px;
    background-size: cover;
}
.text {
    font-weight: 900;
    color: white;
    font-size: 40px;
    position: absolute;
    top: 50px;
    width: 100%;
    text-align: center;
}
.search {
    position: absolute;
    width: 100%;
    top: 130px;
    text-align: center;
    .el-input {
        width: 40%;
    }
}
.search-item {
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    &:hover {
        background: whitesmoke;
        color: red;
    }
}
</style>
